<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
    
</head>
<body>
    <div class="nav">
        网络五子棋对战游戏
    </div>
    <div class="login-container">
        <!-- 登录界面的对话框 -->
        <div class="login-dialog">
            <!-- 提示信息 -->
            <h3>注册</h3>
            <!-- 这个表示一行 -->
            <div class="row">
                <span>用户名</span>
                <input type="text" id="user_name" name="username">
            </div>
            <!-- 这是另一行 -->
            <div class="row">
                <span>密码</span>
                <input type="password" id="password" name="password">
            </div>
            <!-- 提交按钮 -->
            <div class="row">
                   <!--【1.】 给提交按钮添加点击事件 , 点击提交后会执行注册函数*/-->
                <button id="submit" onclick="reg()">提交</button>
            </div>
        </div>
    </div> 

    <script src="js/jquery.min.js"></script>
    <!--用户注册需要前端发起 , 首先要获取注册页面 , 所以需要发起请求-->
    <!--前端编写需要遵守设定好的格式 , 用 ajax 请求发送序列化数据-->

    <script>
        /*【2.】 自定义注册函数 , 为点击事件提供*/
        function reg()
        {
            //1. 获取输入框中的用户名和密码 , 组织一个 Json 格式的变量
           var reg_info ={
            username : document.getElementById("user_name").value,
            password : document.getElementById("password").value
           };
           console.log(JSON.stringify(reg_info)); //日志
           //2. 通过 ajax 向后端发送注册请求 - jQuery 的 $.ajax 格式
           $.ajax({
            url  : "/reg",
            type : "POST",
            data : JSON.stringify(reg_info), //序列化
            contentType : "application/json",
            success : function(res)
            {
                //成功了 , 向后端发送请求 json 串的注册
                if(res.result == false) //后端返回 result 的是假
                {
                    //向后端请求失败 , 清空输入框中内容 , 并显示后端返回的失败原因
                    document.getElementById("user_name").value = "";
                    document.getElementById("password").value = "";
                    alert(res.reason);
                }
                else if(res.reason == "该用户已经注册!")
                {
                    alert("用户已经注册 , 请登录 !");
                    window.location.href = "/login.html"; // 跳转到登录页面
                }
                else 
                {
                    //向后端请求成功 , 即 : 注册成功 , 跳转到登录页面
                    alert(res.reason); // 弹窗显示成功后后端返回的信息
                    window.location.href = "/login.html"; // 跳转到登录页面
                }
            },
            error : function(xhr)
            {
                //失败了 , 输入框用户名和密码置空
                document.getElementById("user_name").value = "";
                document.getElementById("password").value = "";
                alert(xhr.responseJSON.reason);
                // alert(JSON.stringify(xhr)); //弹窗显示 xhr , xhr会包含向服务器请求失败的详细信息 !
            }
           })
          
        }
    </script>
</body>
</html>